<template>
  <div class="hot-list">
    <a-list
      v-if="!loading"
      size="small"
      :bordered="false"
      :split="false"
      class="post-list"
    >
      <a-list-item
        v-for="(item, index) in hotPost"
        :key="index"
        class="list-item"
        @click="handleToPostDetail(item.id)"
      >
        <div class="rank-item">
          <div :class="['rank-icon', getRankClass(index + 1)]">
            {{ index + 1 }}
          </div>
          <div class="post-title">{{ item.title }}</div>
        </div>
      </a-list-item>
    </a-list>
    <a-skeleton v-else animation>
      <a-space direction="vertical" :style="{ width: '100%' }" size="large">
        <a-skeleton-line :rows="5" />
      </a-space>
    </a-skeleton>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { OjPostSimpleVo } from '@/api/gen-api';
import { OjPostService } from '@/api/gen-api/services/OjPostService.ts';
import { useRouter } from 'vue-router';

const hotPost = ref<OjPostSimpleVo[]>([]);
const loading = ref(false);

onMounted(() => {
  loading.value = true;
  OjPostService.getFiveHotPost()
    .then(res => {
      hotPost.value = res.result;
    })
    .finally(() => {
      loading.value = false;
    });
});

const getRankClass = (index: number) => {
  switch (index) {
    case 1:
      return 'rank-1';
    case 2:
      return 'rank-2';
    case 3:
      return 'rank-3';
    default:
      return 'rank-other';
  }
};

const router = useRouter();
const handleToPostDetail = (id: number) => {
  router.push({
    name: 'PostInfo',
    query: {
      postId: id
    }
  });
};
</script>

<style scoped lang="less">
.hot-list {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.post-list {
  padding: 8px 0;

  .list-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background-color: rgb(39 89 205 / 7%);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(39, 89, 205, 0.08);

      .post-title {
        color: #2759CD;
      }
    }
  }
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
}

.rank-1 {
  background-color: #ffb400;
  color: #fff;
}

.rank-2 {
  background-color: #b2b2b2;
  color: #fff;
}

.rank-3 {
  background-color: #c08c63;
  color: #fff;
}

.rank-other {
  background-color: #f2f3f5;
  color: #86909c;
}

.post-title {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
  transition: color 0.3s;
}
</style>
